<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //2
        function check_all() {
            var myTable = document.getElementById('myTable')
            var all=myTable.querySelectorAll('input')[0]
            var Invert=myTable.querySelectorAll('input')[1]=false
            var input = myTable.querySelectorAll('input')
            if (all.checked==true) {
                for (let i = 2; i < input.length; i++) {
                    input[i].checked=true
                }
            }else{
                for (let i = 2; i < input.length; i++) {
                    input[i].checked=false
                }
            }
        }
        function check_Invert(){
            var Invert=myTable.querySelectorAll('input')[1]
            myTable.querySelectorAll('input')[0].checked=false
            var input = myTable.querySelectorAll('input')
            if (Invert.checked==true) {
                for (let i = 2; i < input.length; i++) {
                if(input[i].checked==true) {
                    input[i].checked=false
                }else{
                    input[i].checked=true
                }
                }
            }
            if (Invert.checked==false) {
                for (let i = 2; i < input.length; i++) {
                if(input[i].checked==true) {
                    input[i].checked=false
                }else{
                    input[i].checked=true
                }
                }
            }
        }
    </script>
</head>
<body>
    <!-- 1 -->
    <h2>工作经历</h2>
		<hr/>
		<div id="myContainer">
			<div class="myDiv" id="div1">
				公司名称:<input type="text"/>
				职位:<input type="text" />
				<a href="javascript:RemoveRow('div')" >删除工作经历</a>
				<br />
				工作职责及工作内容描述:
				<textarea class="myArea"></textarea>
				<hr/>
			</div>			
		</div>
		<div style="line-height: 30px; text-align: right;">
			<a href="javascript:AddRow();">添加工作经历</a>
		</div>
    <!-- 2 -->
    <table cellspacing="1" id="myTable">
        <tr>
            <th width="200">
            <input type="checkbox" id="selAll" onchange="check_all()" />全选
            <input type="checkbox" id="selAll" onchange="check_Invert()" />反选
            </th>
            <th width="200">姓名</th>
            <th width="200">性别</th>
            <th width="200">专业</th>
            <th width="200">爱好</th>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>刘备</td>
            <td>男</td>
            <td>软件开发</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>关羽</td>
            <td>男</td>
            <td>国际贸易</td>
            <td>喝酒</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>张飞</td>
            <td>男</td>
            <td>园林设计</td>
            <td>烫头发</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>赵云</td>
            <td>男</td>
            <td>平面设计</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>黄忠</td>
            <td>男</td>
            <td>影视制作</td>
            <td>玩游戏</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>小乔</td>
            <td>女</td>
            <td>高级护理</td>
            <td>唱歌</td>
        </tr>
    </table>
    <script>
        //1
        index=0
        function AddRow() {
           
            var myContainer=document.getElementById('myContainer')
            var message =myContainer.children[0]
            var newdiv=document.createElement('div')
            var main =message.cloneNode(true)
            newdiv.appendChild(main)
            myContainer.appendChild(newdiv)
        }
        function RemoveRow(){
            var myContainer=document.getElementById('myContainer')
            var message = myContainer.children
            var length=message.length
            if (length>1) {
                message[length-1].remove(message);
            }
        }
    </script>
</body>
</html>